<template>
  <div class="">
    <van-nav-bar
      fixed
      title="我的评价"
      left-arrow
      @click-left="$router.go(-1)"
      placeholder
    />
    <!-- -->
    <div class="cardBox" v-for="(v, i) in obj" :key="i">
      <div v-for="(item, index) in v" :key="index" class="card">
        <img :src="item.pic" alt="" />
        <article>
          <p v-html="item.goodsName"></p>
          <p>{{ item.property }}</p>
          <p>
            {{ item.number }}
            <span>
            </span>
          </p>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import { myOrder } from "@/api";
import { ref } from "vue";
export default {
  setup() {
    let obj = ref([]);
    let list = ref([]);
    let token = localStorage.getItem("token");
    myOrder(token).then((res) => {
      console.log(res);
      obj.value = res.goodsMap;
      list.value = res.orderList;
    });
    return {
      obj,
      list,
    };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar .van-icon {
  color: black;
}
.card {
  width: 100%;
  height: 220px;
  background-color: #fff;
  display: flex;
  padding: 10px;
  img {
    width: 300px;
    height: 100%;
    border-radius: 15px;
    margin-right: 20px;
  }

  article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    p {
      font-size: 26px;
      &:nth-child(2) {
        color: rgb(158, 153, 153);
      }
      &:nth-child(3) {
        color: rgb(161, 155, 155);
      }
    }
  }
}
.cardBox {
  background-color: #fff;
  header {
    font-size: 28px;
    width: 100%;
    height: 90px;
    line-height: 90px;
    padding-left: 20px;
  }
}
</style>
